<template>
	<view class="pages-user-login rel" :class="[{'page-height':!configInfo.plugAuth.agentport}]" v-if="isLoad">
		<block v-if="!configInfo.plugAuth.agentport">
			<abnor type="NOT_AUTH" :isCenter="true"></abnor>
		</block>
		<block v-if="configInfo.plugAuth.agentport">
			<!-- #ifdef H5 -->
			<view @tap="$util.goUrl({url:`/agent/pages/account/login?agent=${agentportType}`,openType:`redirectTo`})"
				class="abs" :class="[{'back-user-ios': configInfo.isIos},{'back-user-android': !configInfo.isIos}]"
				style="margin-top:25rpx;z-index: 999;">
				<view class="icon-left iconfont"></view>
				<view class="back-user_text">返回上页</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view @tap="$util.goUrl({url:1,openType:`navigateBack`})" class="abs"
				:class="[{'back-user-ios': configInfo.isIos},{'back-user-android': !configInfo.isIos}]"
				style="z-index: 999;" :style="{marginTop:`${configInfo.navBarHeight - 40}px`}">
				<view class="icon-left iconfont"></view>
				<view class="back-user_text">返回上页</view>
			</view>
			<!-- #endif -->

			<image class="coach-bg abs" :src="`https://api.huixuananmm.com/admin/anmo/technician/coach-bg.png`"></image>
			<view class="rel" style="padding: 60rpx;">
				<!-- #ifdef H5 -->
				<view style="height:112rpx"></view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view style="height:200rpx"></view>
				<!-- #endif -->

				<block v-if="agentportType">
					<view class="login-btn flex-center pl-lg pr-lg f-mini-title radius-16">
						<view class="text">账号</view>
						<view class="flex-1 flex-center">
							<input v-model="form.user_name" class="input flex-1 c-title" type="text" maxlength="20"
								placeholder="请输入账号" placeholder-style="color:#C2CCD8" />
							<i @tap.stop="toClearName('form')" class="iconfont icon-close"
								v-if="form.user_name&&form.user_name.length==11"></i>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="login-btn flex-center pl-lg pr-lg f-mini-title radius-16">
						<view class="text">手机号</view>
						<view class="flex-1 flex-center">
							<input v-model="form.user_name" class="input flex-1 c-title" type="number" maxlength="11"
								placeholder="请输入手机号" placeholder-style="color:#C2CCD8" />
							<i @tap.stop="toClearName('form')" class="iconfont icon-close"
								v-if="form.user_name&&form.user_name.length==11"></i>
						</view>
					</view>
				</block>
				<view class="login-btn flex-center mt-md pl-lg pr-lg f-mini-title radius-16">
					<view class="text">密码</view>
					<view class="flex-1 flex-center">
						<input v-model="form.pass_word" class="input flex-1 c-title"
							:class="[{'passwd-disc':!show_password && form.pass_word.length>0}]" type="text"
							:maxlength="agentportType?20:18" placeholder="请输入密码" placeholder-style="color:#C2CCD8" />
						<i @click="show_password = !show_password" class="iconfont pl-sm cursor-pointer" :class="[
						              { iconxianshimima: show_password },
						              { iconyincangmima: !show_password }
						            ]" style="width: 40rpx"></i>
					</view>
				</view>

				<view @tap.stop="submit('login')" class="login-btn flex-center f-title radius-10"
					style="margin: 40rpx 0" :style="{ background: primaryColor ,color:'#fff'}">登录
				</view>

				<!-- #ifdef MP-WEIXIN-AGENT -->
				<view class="f-caption c-warning">
					{{detail.agent_login_text}}
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="f-caption c-warning" v-if="is_app_user==3">
					{{detail.agent_login_text}}
				</view>
				<!-- #endif -->
			</view>

		</block>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	import siteInfo from '@/siteinfo.js';
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				options: {},
				is_ios_login: false,
				show_password: false,
				lockTap: false,
				detail: {},
				form: {
					user_name: '',
					pass_word: ''
				},
				agentRules: [{
					name: "user_name",
					checkType: "isPassText",
					errorMsg: "请输入账号",
					regText: "账号"
				}, {
					name: "pass_word",
					checkType: "isPassText",
					errorMsg: "请输入密码",
					regType: 2,
					regText: "密码"
				}],
				adminRules: [{
					name: "user_name",
					checkType: "isMobile",
					errorMsg: "请输入手机号",
					regText: "手机号"
				}, {
					name: "pass_word",
					checkType: "isPassWord",
					errorMsg: "请输入密码",
					regText: "密码"
				}]
			}
		},
		async onLoad(options) {
			this.options = options
			this.lockTap = false
			this.initIndex()
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			loginPage: state => state.user.loginPage,
			agentportType: state => state.user.agentportType,
		}),
		methods: {
			...mapActions(['getConfigInfo', 'getAccountCoach']),
			...mapMutations(['updateUserItem']),
			async initIndex() {
				// #ifdef H5
				uni.setNavigationBarTitle({
					title: `登录`
				})
				// #endif
				// #ifdef APP-PLUS
				let {
					browserVersion
				} = uni.getSystemInfoSync()
				let {
					platform
				} = uni.getDeviceInfo()
				this.is_ios_login = platform === 'ios' && browserVersion.split('.')[0] * 1 > 12
				// #endif
				if (!this.configInfo.id) {
					await this.getConfigInfo()
				}
				// #ifdef MP-WEIXIN-AGENT
				this.detail = await this.$api.base.getConfig()
				// #endif
				// #ifdef APP-PLUS
				if (this.is_app_user == 3) {
					this.detail = await this.$api.base.getConfig()
				}
				// #endif
				this.$util.hideAll()
				this.isLoad = true
				// #ifdef H5
				this.$jweixin.hideOptionMenu()
				// #endif
			},
			toClearName(key) {
				let form = this.$util.deepCopy(this[key])
				form.user_name = ''
				this.$nextTick(() => {
					this[key] = form
				}, 0)
			},
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				let type = this.agentportType ? 'agent' : 'admin'
				console.log(type, "===type")
				this[`${type}Rules`].map(item => {
					let {
						name,
					} = item
					validate.add(param[name], item)
				})
				let message = validate.start();
				return message;
			},
			async submit(key) {
				let {
					authTime,
					agentportType: agent
				} = this
				let param = this.$util.deepCopy(this.form)
				let msg = this.validate(param);
				if (msg) {
					this.$util.showToast({
						title: msg
					})
					return
				}
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					let methodModel = agent ? 'agentAccountLogin' : 'adminAccountLogin'
					let loginInfo = await this.$api.base[methodModel](param)
					this.$util.hideAll()
					this.lockTap = false
					// let pageUrl = this.loginPage || `/pages/agent-index`
					let pageUrl = `/pages/agent-index`
					this.$util.showToast({
						title: '登录成功'
					})
					let {
						autograph,
						data
					} = loginInfo
					let params = agent ? {
						agent_status: 1
					} : {
						admin_status: 1
					}
					this.updateUserItem({
						key: 'autograph',
						val: loginInfo.autograph
					})
					this.updateUserItem({
						key: 'userInfo',
						val: Object.assign({}, data, params)
					})
					this.updateUserItem({
						key: 'isRegister',
						val: false
					})
					setTimeout(() => {
						this.$util.goUrl({
							url: pageUrl,
							openType: `reLaunch`
						})
					}, 1000)
					return
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
		height: 100%;
	}


	.pages-user-login {
		.coach-bg {
			top: 0;
			left: 0;
			width: 100%;
			height: 401rpx
		}

		.logo-img {
			width: 100rpx;
			height: 100rpx;
		}

		.logo-img.md {
			width: 130rpx;
			height: 130rpx;
		}

		.line {
			left: 0;
			top: 60rpx;
			width: 60rpx;
			height: 7rpx;
			border-radius: 7rpx;
		}

		.other-sign {
			width: 328rpx;
			height: 60rpx;

			.f-mini-title {
				height: 60rpx;
				color: #142C57
			}
		}

		.b-1px-t::before {
			top: 29rpx;
			border-top: 1rpx solid #677792;
			color: #677792;
		}

		.sign-icon-btn {
			width: 76rpx;
			height: 76rpx;

			.iconfont {
				font-size: 40rpx;
			}
		}

		.sign-icon-btn.abs {
			opacity: 0.1;
		}

		.btn-item {
			width: 220pt;
			height: 44pt;
			font-size: 15pt;
			border: 1rpx solid #000;
			transform: rotateZ(360deg);

			.iconfont {
				font-size: 19pt;
			}
		}

		.wechat {
			border: none;
			font-size: 13pt;
			box-shadow: 0 18rpx 9rpx 0 rgba(0, 188, 82, 0.07);
		}

		.apple {
			margin-top: 40rpx;
		}

		.login-btn {
			width: 630rpx;
			height: 110rpx;
			color: #142C57;
			background: #F6F7FB;

			.text {
				width: 140rpx
			}

			.input {
				height: 110rpx;
			}

			.iconxianshimima {
				font-size: 30rpx;
			}

			.iconyincangmima {
				font-size: 16rpx;
			}

		}
	}
</style>